{% extends "template_base.html" %}
{% block title %}DeepyWeb - Register NOW!{% endblock %}

{% block navbar %}
<nav id="navbar" class="navbar">
    <ul>
        <!--<li><a class="nav-link scrollto active " href="#header">Home</a></li>-->
        <li><a class="nav-link scrollto" href="/">主 页</a></li>
        {% if not valid %}
        <li><a class="getstarted scrollto" href="login">登 录</a></li>
        {% endif %}
        {% if valid %}
        <li><a class="getstarted scrollto" href="logout">登 出</a></li>
        {% endif %}

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
{% endblock %}

{% block script %}
<script>
    $(function () {
        var text = document.getElementById("my_alert").textContent;
        if (text != '') {
            alert(text);
        }
    });

    function finish_check() {
        var user_name = document.forms["register"]["user_name"].value;
        var email = document.forms["register"]["email"].value;
        var Password = document.forms["register"]["password"].value;
        var Repeat_Password = document.forms["register"]["repeat_password"].value;
        var Phone = document.forms["register"]["phone"].value;
        if (user_name == null || user_name == "") {
            alert("Completing the incomplete information, please return the completed!");
            return false;
        } else if (email == null || email == "") {
            alert("Completing the incomplete information, please return the completed!");
            return false;
        } else if (Password == null || Password == "") {
            alert("Completing the incomplete information, please return the completed!");
            return false;
        } else if (Phone == null || Phone == "") {
            alert("Completing the incomplete information, please return the completed!");
            return false;
        } else if (Repeat_Password == null || Repeat_Password == "") {
            alert("Completing the incomplete information, please return the completed!");
            return false;
        } else {
            var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                alert("Mail address format is not correct!");
                return false;
            } else if (Password != Repeat_Password) {
                alert("Two different input password, please re-entry!");
                return false;
            }
        }
    }

</script>
{% endblock %}

{% block main %}
<main id="main">
    <span id="my_alert" style="display:none;">{{my_alert}}</span>
    <!-- ======= Breadcrumbs ======= -->
    <section class="breadcrumbs">
        <div class="container">
            <ol>
                <li><a href="login">Login</a></li>
                <li>Rigster</li>
            </ol>
            <h2>Rigster</h2>
        </div>
    </section>
    <!-- End Breadcrumbs -->

    <section class="inner-page">
        <div class="container">
            <div class="register-form">
                <div class="col-xl-10 col-lg-12 col-md-9" style="margin: 0 auto;">
                    <div class="card o-hidden border-0 shadow-lg my-5" ,
                         style="width: 65%;margin: auto;text-align: center;">
                        <div class="card-body p-0">
                            <!-- Nested Row within Card Body -->
                            <div class="row">

                                <div class="p-5">
                                    <div class="text-center">
                                        <h2>创 建 新 账 号 !</h2>
                                    </div>
                                    <br>
                                    <form class="user" name="register" onsubmit="finish_check();" method="post">
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-user"
                                                   id="exampleFirstName"
                                                   placeholder="您的姓名" name="user_name">
                                        </div>
                                        <br>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-user"
                                                   id="exampleInputEmail"
                                                   placeholder="邮箱地址" name="user_email">
                                        </div>
                                        <br>
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-user"
                                                   id="exampleInputPhone"
                                                   placeholder="电话号码" name="phone">
                                        </div>
                                        <br>
                                        <div class="form-group row">
                                            <div class="col-sm-6 mb-3 mb-sm-0">
                                                <input type="password" class="form-control form-control-user"
                                                       id="exampleInputPassword" placeholder="密码" name="user_password">
                                            </div>
                                            <div class="col-sm-6">
                                                <input type="password" class="form-control form-control-user"
                                                       id="exampleRepeatPassword" placeholder="确认密码"
                                                       name="repeat_password">
                                            </div>
                                        </div>
                                        <br>
                                        <div style="text-align:center;color:red;">{{ error }}</div>
                                        <input type="submit" class="btn btn-primary btn-user btn-block" value="创 建">
                                        <hr>
                                    </form>
                                    {#
                                    <div class="text-center"><a class="small" href="forgot-password.html">Forgot
                                        Password?</a></div>
                                    #}
                                    <div class="text-center"><a class="small" href="login">已有账号？登录！</a></div>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
{% endblock %}
